import React, { memo } from 'react';
import { Card, Row, Col, Statistic, Descriptions, Tag, Space } from 'antd';
import { ThunderboltOutlined, EyeOutlined, DashboardOutlined } from '@ant-design/icons';

interface DynamicWeatherData {
  id: string;
  cityId: string;
  cityName?: string;
  recordedAt: string;
  createdAt: string;
  [key: string]: any; // 动态指标数据
}

interface DynamicWeatherDisplayProps {
  data: DynamicWeatherData;
  compact?: boolean;
}

export const DynamicWeatherDisplay: React.FC<DynamicWeatherDisplayProps> = memo(({ data, compact = false }) => {
  // 提取核心指标（如果存在）
  const coreMetrics = {
    temperature: data.temperature,
    humidity: data.humidity,
    pressure: data.pressure,
    windSpeed: data.windSpeed
  };

  // 提取扩展指标
  const extendedMetrics = Object.entries(data)
    .filter(([key, value]) => 
      !['id', 'cityId', 'cityName', 'recordedAt', 'createdAt', 'temperature', 'humidity', 'pressure', 'windSpeed'].includes(key) 
      && value !== null && value !== undefined
    );

  // 获取指标显示名称和单位
  const getMetricDisplay = (key: string, value: any) => {
    const metricConfig: Record<string, { name: string; unit: string; icon?: React.ReactNode }> = {
      windDirection: { name: '风向', unit: '°', icon: <DashboardOutlined /> },
      visibility: { name: '能见度', unit: 'km', icon: <EyeOutlined /> },
      uvIndex: { name: '紫外线指数', unit: '', icon: <ThunderboltOutlined /> },
      weatherCondition: { name: '天气状况', unit: '' }
    };

    const config = metricConfig[key] || { name: key, unit: '' };
    return {
      ...config,
      displayValue: typeof value === 'number' ? value.toFixed(1) : value.toString()
    };
  };

  if (compact) {
    return (
      <Card size="small" style={{ marginBottom: 8 }}>
        <Row gutter={16}>
          <Col span={6}>
            <Statistic
              title="温度"
              value={coreMetrics.temperature}
              suffix="°C"
              precision={1}
              valueStyle={{ fontSize: 16 }}
            />
          </Col>
          <Col span={6}>
            <Statistic
              title="湿度"
              value={coreMetrics.humidity}
              suffix="%"
              precision={1}
              valueStyle={{ fontSize: 16 }}
            />
          </Col>
          <Col span={6}>
            <Statistic
              title="气压"
              value={coreMetrics.pressure}
              suffix="hPa"
              precision={1}
              valueStyle={{ fontSize: 16 }}
            />
          </Col>
          <Col span={6}>
            <div>
              <div style={{ fontSize: 12, color: '#666' }}>位置</div>
              <div style={{ fontSize: 16, fontWeight: 500 }}>{data.cityName || 'Unknown'}</div>
            </div>
          </Col>
        </Row>
        {extendedMetrics.length > 0 && (
          <div style={{ marginTop: 8 }}>
            <Space wrap>
              {extendedMetrics.map(([key, value]) => {
                const metric = getMetricDisplay(key, value);
                return (
                  <Tag key={key} color="blue">
                    {metric.name}: {metric.displayValue}{metric.unit}
                  </Tag>
                );
              })}
            </Space>
          </div>
        )}
      </Card>
    );
  }

  return (
    <Card 
      title={`${data.cityName || 'Unknown'} - 天气数据`}
      extra={<span style={{ fontSize: 12, color: '#666' }}>{new Date(data.recordedAt).toLocaleString('zh-CN')}</span>}
    >
      <Row gutter={16}>
        {/* 核心指标显示 */}
        <Col span={6}>
          <Statistic
            title="温度"
            value={coreMetrics.temperature}
            suffix="°C"
            precision={1}
            valueStyle={{ color: '#1890ff' }}
          />
        </Col>
        <Col span={6}>
          <Statistic
            title="湿度"
            value={coreMetrics.humidity}
            suffix="%"
            precision={1}
            valueStyle={{ color: '#52c41a' }}
          />
        </Col>
        <Col span={6}>
          <Statistic
            title="气压"
            value={coreMetrics.pressure}
            suffix="hPa"
            precision={1}
            valueStyle={{ color: '#faad14' }}
          />
        </Col>
        <Col span={6}>
          <Statistic
            title="风速"
            value={coreMetrics.windSpeed}
            suffix="m/s"
            precision={1}
            valueStyle={{ color: '#722ed1' }}
          />
        </Col>
      </Row>

      {/* 扩展指标显示 */}
      {extendedMetrics.length > 0 && (
        <Descriptions
          title="其他指标"
          bordered
          column={3}
          size="small"
          style={{ marginTop: 16 }}
        >
          {extendedMetrics.map(([key, value]) => {
            const metric = getMetricDisplay(key, value);
            return (
              <Descriptions.Item
                key={key}
                label={
                  <span>
                    {metric.icon && <span style={{ marginRight: 4 }}>{metric.icon}</span>}
                    {metric.name}
                  </span>
                }
              >
                {metric.displayValue}{metric.unit}
              </Descriptions.Item>
            );
          })}
        </Descriptions>
      )}
    </Card>
  );
});

export default DynamicWeatherDisplay;